<script setup>
    import { onMounted } from 'vue'
    import { getVillageList } from '@/api/govern'
    import VillageInfo from './components/VillageInfo.vue'
    import DataSearch from './components/DataSearch.vue'
    import SpecialCrowdList from './components/SpecialCrowd/details.vue'
    import XzMap from './components/XzMap.vue'
    import topIcon1 from '../../assets/images/govern-top-icon-1.png'
    import topIcon1On from '../../assets/images/govern-top-icon-1-on.png'
    import topIcon2 from '../../assets/images/govern-top-icon-2.png'
    import topIcon2On from '../../assets/images/govern-top-icon-2-on.png'

    let currentIndex = $ref(0)
    let currentType = $ref('')

    onMounted(() => {
        getList()
    })
    
    // 获取村列表
    let resData = $ref([])
    let dataLoading = $ref(false)
    const getList = () => {
        dataLoading = true
        getVillageList().then(res => {
            dataLoading = false
            if(res.success){
                resData = res.result
            }
        })
    }

    // 是否折叠
    let isUnfold = $ref(false)

    // 点击折叠
    const handleClickFold = () => {
        isUnfold = !isUnfold
    }

    // 点击户况
    let villageInfo = $ref(null)
    const handleClickHk = (sysOrgCode, index) => {
        villageInfo.showDialog(sysOrgCode, index)
        currentIndex = index
        currentType = 'hk'
    }

    // 徐庄镇vr
    let xzVr = 'https://quanjingtong.cn/t/06lo3wkqomf?scene_id=3962'

    // 显示vr
    let showVr = $ref(false)
    let vrUrl = $ref(xzVr)

    // 点击vr
    const handleClickVr = (url, index) => {
        vrUrl = url
        currentIndex = index
        currentType = 'vr'
        showVr = true
    }

    // 显示数据搜索
    let dataSearch = $ref(null)
    const showSearch = () => {
        dataSearch.showDialog(resData, currentIndex ? resData[currentIndex-1].sysOrgCode : '')
    }

    // 显示特殊人群
    let specialCrowd = $ref(null)
    let specialType = ['残疾人', '低保户', '退役军人', '五保户']
    const showSpecialCrowd = (type) => {
        specialCrowd.showDetails(type)
    }

    // 网格图 vr图 tabbar
    let currentTabbarIndex = $ref(1)
    let tabbarData = [
        { name: '网格图', img: topIcon1, img2: topIcon1On },
        { name: 'VR图', img: topIcon2, img2: topIcon2On },
    ]
    
    const handleClickTabbar = (index) => {
        currentTabbarIndex = index
    }

</script>

<template>
    <div class="content-main govern-wrap" v-loading="dataLoading">

        <div class="vr" v-if="currentTabbarIndex==1">
            <iframe :src="vrUrl" frameborder="0"></iframe>
        </div>

        <div class="vr" v-if="!currentTabbarIndex">
            <xz-map ref="xzMap" :list="resData" @showVillageInfo="handleClickHk"></xz-map>
        </div>

        <!-- vr 地图切换 -->
        <div class="map-vr-tabbar flex" :class="{ fold: isUnfold }">
            <div 
                class="item flex-center"
                v-for="(item, index) in tabbarData"
                :key="index"
                :class="{ active: index == currentTabbarIndex }"
                @click="handleClickTabbar(index)"
            >
                <img :src="index == currentTabbarIndex ? item.img2 : item.img" alt="">
                {{ item.name }}
            </div>
        </div>

        <!-- 搜索 -->
        <div class="search-wrap" :class="{ fold: isUnfold }">
            <div class="search" @click="showSearch"></div>
        </div>

        <!-- 特殊人群 -->
        <div class="special-crowd flex" :class="{ fold: isUnfold }">
            <!-- <div class="btn" @click="showSpecialCrowd">特殊人群</div> -->
            <div 
                class="special-item"
                v-for="(item, index) in specialType"
                :key="index"
                @click="showSpecialCrowd(index)"
            >
                <div class="img"></div>
                <div class="desc">{{ item }}</div>
            </div>
        </div>

        <div class="left-card" :class="{ fold: isUnfold }">
            <div class="village-list">
                <div class="card-title"><img src="../../assets/images/card-title-icon-1.png">村信息列表</div>
                
                <el-scrollbar class="list-wrap">
                    <div class="item towns flex-between">
                        <div class="name" :class="{ active: !currentIndex }">徐庄镇</div>
                        <div class="show-type">
                            <!-- <span>网格</span> -->
                            <span class="vr" @click="handleClickVr(xzVr, 0)" :class="{ 'active': currentIndex == 0 }">VR</span>
                        </div>
                    </div>
                    <div 
                        class="item flex-between"
                        v-for="(item, index) in resData"
                        :key="index"
                    >
                        <div class="name" :class="{ active: index+1 == currentIndex }">{{ item.sysOrgCode_dictText }}</div>
                        <div class="show-type">
                            <span 
                                class="vr"
                                v-if="item.vrUrl"
                                @click="handleClickVr(item.vrUrl, index+1)"
                                :class="{ 'active': index+1 == currentIndex && currentType == 'vr' }"
                            >VR</span>
                            <span 
                                class="hk"
                                @click="handleClickHk(item.sysOrgCode, index+1)"
                                :class="{ 'active': index+1 == currentIndex && currentType == 'hk' }"
                            >户况</span>
                        </div>
                    </div>
                </el-scrollbar>

                <div class="fold-menu" @click="handleClickFold"></div>

            </div>
        </div>

        <div class="shadow left-shadow" :class="{ fold: isUnfold }"></div>

    </div>

    <!-- 户况 -->
    <village-info ref="villageInfo"></village-info>

    <!-- 数据查询 -->
    <data-search ref="dataSearch"></data-search>

    <!-- 特殊人群 -->
    <special-crowd-list ref="specialCrowd"></special-crowd-list>

</template>

<style lang="less" scoped>
    .govern-wrap{

        .shadow{
            width: 500px;
        }

        .vr{
            width: 100%;
            height: 100%;
            // background: url('../../assets/images/test.jpeg') center no-repeat;
            iframe{
                width: 100%;
                height: 100%;
            }
        }

        .map-vr-tabbar{
            position: absolute;
            top: 116px;
            left: 468px;
            z-index: 9;
            border: 1px solid #2255A4;

            .item{
                width: 108px;
                height: 36px;
                font-size: 14px;
                color: #2255A4;
                cursor: pointer;

                &:first-child{
                    border-right: 1px solid #2255A4;
                }

                &.active{
                    background: #2255A4;
                    color: #fff;
                }

                img{
                    margin-right: 8px;
                }
            }
        }

        .search-wrap{
            position: absolute;
            top: 114px;
            right: 40px;
            z-index: 9;
            padding-left: 16px;
            border-left: 1px solid #fff;

            .search{
                width: 240px;
                height: 46px;
                border-radius: 23px;
                background: rgba(0, 0, 0, 0.35) url('../../assets/images/search.png') 190px no-repeat;
                cursor: pointer;
                
            }

            &.fold{
                display: none;
            }
        }

        .special-crowd{
            position: absolute;
            top: 114px;
            right: 295px;
            z-index: 9;

            &.fold{
                display: none;
            }

            .special-item{
                margin-right: 16px;
                text-align: center;
                cursor: pointer;

                .img{
                    display: inline-block;
                    width: 34px;
                    height: 34px;
                    background: url('../../assets/images/special-icon-1.png') center no-repeat;
                }
                .desc{
                    margin-top: 5px;
                    font-size: 16px;
                    color: #fff;
                    background: rgba(33,77,134,0.6);
                    height: 22px;
                    line-height: 22px;
                    border-radius: 2px;
                    padding: 0 10px;
                }

                .special-item(@counter) when (@counter >0 ) {
                    &:nth-child(@{counter}) {
                        .img{
                            background: url("../../assets/images/special-icon-@{counter}.png") center no-repeat;
                        }
                        &:hover { 
                            .img{
                                background: url("../../assets/images/special-icon-@{counter}-on.png") center no-repeat; 
                            }
                            .desc{
                                background: rgba(23,159,255,0.6);
                            }
                        }
                    }
                    .special-item(( @counter - 1 ));// 递归调用自身
                }
                .special-item(10);
            }
        }

        .left-card{
            width: 339px;
            transition: all .3s;

            &.fold{
                left: -339px;

                .fold-menu{
                    transform: rotate(180deg);
                }
            }
            
            .village-list{
                height: 847px;
                background-size: 339px 874px;
                position: relative;

                .list-wrap{
                    height: 750px;
                    margin-top: 30px;

                    .item{
                        margin-bottom: 17px;
                        color: #fff;
                        margin-left: 40px;

                        &.towns{
                            margin-left: 30px;
                            
                            
                        }

                        & .active, &:hover .name{
                            color:#00E7FF;
                        }

                        .name{
                            font-size: 18px;

                            &.active{
                                color: #00E7FF;
                                font-size: 22px;
                                font-weight: bold;
                            }
                        }

                        .show-type{
                            font-size: 12px;
                            margin-right: 16px;
                            
                            span{
                                display: inline-block;
                                width: 30px;
                                height: 30px;
                                line-height: 30px;
                                background: #179FFF;
                                border-radius: 50%;
                                margin-left: 8px;
                                text-align: center;
                                cursor: pointer;

                                &.vr{
                                    font-size: 16px;
                                }

                                &:hover{
                                    background: #0471EB;
                                }

                                &.active{
                                    background: #0471EB;
                                    color: #fff;
                                }
                            }
                        }
                    }
                }
            }

            .fold-menu{
                position: absolute;
                top: 50%;
                right: -40px;
                margin-top: -39px;
                width: 40px;
                height: 78px;
                background: rgba(0, 0, 0, 0.6) url('../../assets/images/fold-menu.png') center no-repeat;
                cursor: pointer;
            }

        }
    }
</style>